<!doctype html>
<html>

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title>享送小哥</title>
    <link rel="stylesheet" type="text/css" href="../css/aui.css" />
    <link rel="stylesheet" type="text/css" href="../css/style.css" />
</head>

<body>
    <div class="aui-content">
        <header class="aui-bar aui-bar-nav aui-bar-light u-aui-bar" id="header">
            <a class="aui-pull-left aui-btn" onclick="javascript:api.closeWin();"> <span class="aui-iconfont aui-icon-left"></span> </a>
            <div class="aui-title u-aui-title">注册</div>
        </header>
        <div class="aui-content aui-margin-b-15">
            <div class="login-t1"></div>
            <ul class="aui-list aui-form-list aui-form-list2">
                <li class="aui-list-item aui-padded-l-0">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input">
                            <input placeholder="请输入手机号码" type="tel" class="u-inp1" maxlength="11" v-model="phone">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item aui-padded-l-0">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input aui-padded-r-0">
                            <input placeholder="短信验证码" type="number" class="u-inp1 u-inp2" maxlength="6" v-model="code">
                            <input class="code-btn aui-btn" value="发送验证码" type="button" @click="sms">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item aui-padded-l-0">
                    <div class="aui-list-item-inner">
                        <div class="aui-list-item-input">
                            <input placeholder="设置登录密码" type="password" class="u-inp1" v-model="password">
                        </div>
                    </div>
                </li>
                <li class="aui-list-item aui-padded-l-0">
                    <div class="aui-list-item-inner bor-bn">
                        <div class="aui-list-item-input">
                            <input placeholder="确认密码" type="password" class="u-inp1" v-model="password2">
                        </div>
                    </div>
                </li>
            </ul>
            <ul class="aui-list aui-form-list aui-form-list2 aui-margin-t-15">
                <li class="aui-list-item aui-padded-l-0">
                    <div class="aui-list-item-inner bor-bn">
                        <div class="aui-list-item-input">
                            <input placeholder="邀请码" type="text" class="u-inp1" v-model="inviter">
                        </div>
                    </div>
                </li>
            </ul>
            <div class="logon-zc aui-margin-b-10 aui-margin-t-10">
                <label>
        <input class="aui-radio" type="checkbox" checked="" onclick="return false;">
        同意<a href="javascript:;" class="blue" @click="agreement">《注册服务条款》</a></label>
            </div>
            <input type="submit" class="aui-btn aui-btn-info login-sub2" value="注册" @click="regist">
        </div>
    </div>
    <!--js-->
    <script type="text/javascript" src="../script/api.js"></script>
    <script type="text/javascript" src="../script/vue.js"></script>
    <script type="text/javascript" src="../script/app.js"></script>
    <!--验证码-->
    <script type="text/javascript">
        apiready = function() {
            var statusBarPos = app.statusBar.pos();
            var headerPos = app.pos('header');

            vObj = new Vue({
                el: ".aui-content",
                data: {
                    phone: "",
                    code: "",
                    password: "",
                    password2: "",
                    inviter: ""
                },
                methods: {
                    sms: function(e) {
                        var that = this,
                            btn = e.target;
                        if (this.phone == "") {
                            app.error("请输入手机号！");
                            return false;
                        }
                        app.request.post('Common/sms', {
                            phone: that.phone,
                            type: "101"
                        }, {}, function(res) {
                            if (res.code == 200) {
                                settime(btn);
                            } else {
                                app.error(res.message);
                            }
                        })
                    },
                    regist: function() {
                        var that = this;
                        if (this.phone == "") {
                            app.error("请输入手机号！");
                            return false;
                        } else if (this.code == "") {
                            app.error("请输入验证码！");
                            return false;
                        } else if (this.password == "") {
                            app.error("请输入密码！");
                            return false;
                        } else if (this.password != this.password2) {
                            app.error("2次密码输入不一致！");
                            return false;
                        } else {
                            app.request.post('Client/regist', this.$data, {}, function(res) {
                                if (res.code == 200) {
                                    //注册成功登录
                                    app.request.post('Client/login', {
                                        type: 'password',
                                        phone: that.phone,
                                        password: that.password
                                    }, {}, function(res) {
                                        app.loginSuccess(res, function() {
                                            api.closeWin({
                                                name: 'login'
                                            });
                                            api.closeWin({
                                                name: 'login0'
                                            });
                                            api.closeWin();
                                        });
                                    });
                                } else {
                                    app.error(res.message);
                                }
                            });
                        }
                    },
                    agreement: function() {
                        api.showProgress({
                            title: '正在读取',
                            text: '请稍候...',
                            modal: true
                        });
                        api.openFrame({
                            name: 'agreement',
                            url: app.app_host + 'Common/articleDetail?close=1&id=12',
                            rect: {
                                x: 0,
                                y: statusBarPos.h + headerPos.h,
                                w: 'auto',
                                h: 'auto'
                            },
                            bgColor: '#eee',
                            bounces: true,
                            animation: {
                                type: 'push',
                                subType: 'from_bottom'
                            }
                        });
                        api.hideProgress();
                    }
                }
            })
        }

        var countdown = 60;

        function settime(obj) {
            if (countdown == 0) {
                obj.removeAttribute("disabled");
                obj.value = "发送验证码";
                obj.style.background = "#2db3ff";
                countdown = 60;
                return;
            } else {
                obj.setAttribute("disabled", true);
                obj.value = "重新发送(" + countdown + ")";
                obj.style.background = "#E1E1E1";
                countdown--;
            }
            setTimeout(function() {
                settime(obj)
            }, 1000)
        }
    </script>
</body>

</html>
